<template>
  <div>
    <div>
      <!-- 查询条 -->
      <el-input
        placeholder="请输入ip"
        v-model="input.ip"
        prefix-icon="el-icon-search"
        style="width: 300px; margin-left: -200px"
      >
      </el-input>
      <!-- 查询按钮 -->
      <el-button type="info" plain @click="find" style="margin-left: 10px"
        >查找</el-button
      >
      <!-- 新增按钮 -->
      <el-button type="info" plain @click="dialogFormVisible = true"
        >新增</el-button
      >
      <!-- 上传 -->
      <div
        style="width: 130px; height: 60px; position: fixed; margin-top: -36px"
      >
        <el-upload
          action="safesys/api/loophole/import"
          :on-success="reloadpage"
          :before-upload="beforeAvatarUpload"
        >
          <el-button type="primary" size="small">上传</el-button>
          <div slot="tip"></div>
        </el-upload>
      </div>
      <!-- 下载 -->
      <div
        style="
          width: 130px;
          height: 60px;
          position: fixed;
          margin-top: -36px;
          margin-left: 100px;
        "
      >
        <!-- <input
          type="file"
          id="file"
          hidden
          @change="fileChange"
          webkitdirectory
        /> -->
        <el-button type="primary" size="small" @click="btnChange"
          >导出</el-button
        >
      </div>
    </div>
    <div style="height: 10px"></div>
    <!-- 显示表格 -->
    <template>
      <div class="table_all">
        <el-card shadow="hover" class="tebale_card">
          <el-table
            height="510px"
            :data="tableData"
            :row-style="getRowClass"
            :header-row-style="getRowClass"
            :header-cell-style="getRowClass"
          >
            <el-table-column prop="ip" label="IP"> </el-table-column>
            <el-table-column prop="port" label="端口"> </el-table-column>
            <el-table-column prop="content" label="描述"> </el-table-column>
            <el-table-column prop="type" label="类型"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="164px">
            </el-table-column>
            <el-table-column prop="state" label="状态"> </el-table-column>
            <el-table-column label="操作" width="300px">
              <template slot-scope="scope">
                <div>
                  <el-button type="primary" @click="detail(scope.row)"
                    >编辑</el-button
                  >
                  <el-button type="primary" @click="sendtobefore(scope.row)"
                    >下发</el-button
                  >
                  <el-button type="danger" @click="delet1(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </template>
    <!-- 分页列表 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="input.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="input.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="
        position: fixed;
        bottom: 10px;
        width: 90%;
        text-align: center;
        margin-left: -160px;
      "
      :total="total"
    >
    </el-pagination>
    <!-- 新增弹框 -->
    <el-dialog title="新增项目" :visible.sync="dialogFormVisible" width="550px">
      <el-form :model="form">
        <el-form-item label="IP" :label-width="formLabelWidth">
          <el-select v-model="form.ip" placeholder="IP">
            <el-option
              v-for="service in allservice"
              :label="service.ip"
              :value="service.ip"
              :key="service.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="端口" :label-width="formLabelWidth">
          <el-input v-model="form.port" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="漏洞类型" class="tt1">
            <el-option
              v-for="item in options"
              :label="item"
              :value="item"
              :key="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="clean">取 消</el-button>
        <el-button type="primary" @click="adder">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹框 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible1" width="500px">
      <el-form :model="form1">
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form1.content" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="form1.type" placeholder="漏洞类型" class="tt1">
            <el-option
              v-for="item in options"
              :label="item"
              :value="item"
              :key="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form1.state" placeholder="状态">
            <el-option label="未处理" value="未处理"></el-option>
            <el-option label="已处理" value="已处理"></el-option>
            <el-option label="处理中" value="处理中"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 下发弹窗 -->
    <el-dialog
      title="下发任务"
      :visible.sync="dialogFormVisible2"
      width="400px"
    >
      <el-form :model="form1">
        <el-form-item label="处理人" :label-width="formLabelWidth">
          <el-select
            v-model="form1.userName"
            placeholder="处理人"
            @change="$forceUpdate()"
          >
            <el-option
              v-for="user in allusers"
              :label="user.userName"
              :value="user.userName"
              :key="user.userName"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="sendtoafter">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      requesturl: "/safesys/api/loophole/",
      total: 0,
      formLabelWidth: "70px",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      input: { pageNum: 1, pageSize: 5, searchKey: "" },
      tableData: [],
      allusers: [],
      allservice: [],
      form: { state: "未处理" },
      form1: {},
      interfaces: ["detail", "add", "del", "update", "search", "issue", "out"],
      options: [
        "SQL注入漏洞",
        "跨站脚本漏洞",
        "弱口令漏洞",
        "HTTP报头追踪漏洞",
        "Struts2远程命令执行漏洞",
        "框架钓鱼漏洞（框架注入漏洞）",
        "文件上传漏洞",
        "应用程序测试脚本泄露",
        "私有IP地址泄露漏洞",
        "未加密登录请求",
        "敏感信息泄露漏洞",
      ],
      fileList: [],
      SavePath: "",
      id: "1",
      imgDataUrl: "",
    };
  },
  methods: {
    clean() {
      this.form = {};
      this.dialogFormVisible = false;
    },

    //修改页数
    handleCurrentChange: function (currentPage) {
      this.input.pageNum = currentPage;
      this.CURD(this.interfaces[4], this.input, 1);
    },
    //修改页面数据量
    handleSizeChange: function (pagesize) {
      this.input.pageSize = pagesize;
      this.CURD(this.interfaces[4], this.input, 1);
    },
    //修改表格背景色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:#ffffff00;";
    },
    //查询方法
    find() {
      this.CURD(this.interfaces[4], this.input, 2);
    },
    //新增方法
    adder() {
      this.form.state = "未处理";
      this.CURD(this.interfaces[1], this.form, 3);
    },
    //编辑方法
    edit() {
      this.CURD(this.interfaces[3], this.form1, 3);
    },
    //详情方法
    detail(row) {
      this.CURD(this.interfaces[0], { id: row.id }, 5);
      this.dialogFormVisible1 = true;
    },
    // 上传成功执行
    reloadpage(response, file) {
      this.$message({
        duration: 500,
        message: "上传成功!",
      });

      setTimeout(() => {
        window.location.reload();
      }, 1000);
    },
    // 上传前判断文件类型
    beforeAvatarUpload(file) {
      const isXML = file.type === "application/vnd.ms-excel";
      if (!isXML) {
        this.$message.error("上传文件只能是 xml 格式!");
      }
      return isXML;
    },
    //下任务发前
    sendtobefore(row) {
      this.CURD(this.interfaces[0], { id: row.id }, 5);
      this.dialogFormVisible2 = true;
    },
    //下任务发后
    sendtoafter() {
      this.form1.state = "处理中";
      this.CURD(this.interfaces[3], this.form1, 4);
      this.CURD(this.interfaces[5], this.form1, 3);
    },
    //删除方法
    delet1(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.CURD(this.interfaces[2], { id: row.id }, 3);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除取消",
          });
        });
    },
    //统合增删改查，用于axios请求
    CURD(url, operate, mod) {
      // mod=1,分页修改
      if (mod == 1) {
        this.$axios.post(this.requesturl + url, operate).then((res) => {
          this.tableData = res.data.data.list;
        });
      }
      // mod==2，3，4，5，都进行axios请求
      // mod==2，修改数据并通知
      // mod==3，通知并刷新页面
      // mod==4，仅请求
      // mod==5，仅通知
      else if (mod == 2 || mod == 3 || mod == 4 || mod == 9) {
        this.$axios.post(this.requesturl + url, operate).then((res) => {
          if (res.data.code == 1) {
            if (mod == 2) {
              this.total = res.data.data.total;
              this.tableData = res.data.data.list;
            }
            if (mod == 3) {
              setTimeout(() => {
                window.location.reload();
              }, 500);
            }
            if (mod != 4) {
              this.$message({
                duration: 1000,
                message: "操作完成！",
              });
            }
          } else {
            this.$message({
              duration: 500,
              message: "操作失败！\t" + res.data.msg,
            });
          }
        });
      } else {
        this.$axios.post(this.requesturl + url, operate).then((res) => {
          this.form1 = res.data.data;
          for (let index = 0; index < this.allusers.length; index++) {
            if (this.allusers[index].id == this.form1.userID) {
              this.form1.userName = this.allusers[index].userName;
            }
          }
        });
      }
    },
    fileChange(e) {
      try {
        const fu = document.getElementById("file");
        this.SavePath = fu.files[0].path;
      } catch (error) {
        console.debug("choice file err:", error);
      }
    },
    btnChange() {
      // var file = document.getElementById("file");
      // file.click();

      this.CURD(this.interfaces[6], { filepath: "E:" }, 9);
      this.$message({
                duration: 1000,
                message: "文件保存于E盘",
              });
    },
  },

  created() {
    //获取初始页面信息
    this.$axios.post("/safesys/api/loophole/search", this.input).then((res) => {
      this.total = res.data.data.total;
      this.tableData = res.data.data.list;
    });
    //获取用户列表
    this.$axios
      .post("/safesys/api/user/search", { pageSize: 1024 })
      .then((res) => {
        this.allusers = res.data.data.list;
      });
    //获取服务器IP列表
    this.$axios
      .post("/safesys/api/server/search", { pageSize: 1024 })
      .then((res) => {
        this.allservice = res.data.data.list;
      });
  },
};
</script>

<style scoped>
.tt1 {
  width: 350px !important;
}
</style>
